<template>
    <div id="bkg">
        <el-row class = "top_box">
            <el-col :span="2">
                <el-button style="border-radius:20px;margin:5px 0px 0px 30px;box-shadow:0px 0px 20px #9370DB" @click="toStatistics()"><i class="el-icon-caret-left" />返回</el-button>
            </el-col>
            <el-col :span="20" style="font-size:28px;letter-spacing:10px;color:#fbf8ff;margin-top:5px;text-align:center">
                {{answerList.qname}}
            </el-col>
            <el-col :span="2">
            <el-avatar :size="50" style="font-size:30px;box-shadow:0px 0px 20px #9370DB" icon="el-icon-user-solid"></el-avatar>
            </el-col>
        </el-row>
        <el-container style="min-height:1000px">
            <el-container>
                <el-aside width="200px"
                style="background-color:rgba(162, 143, 202, 0.3); height:900px;margin-top:20px">
                    <leftMenu
                    :default-active="this.$router.path"
                    @choosePath="choosePath"
                    ></leftMenu>
                </el-aside>
                <el-main style="text-align: left;margin-left:50px;margin-top:30px;padding: 100px 0 0 250px">
                    <el-collapse style="width:70%">
                        <el-collapse-item>
                            <template slot="title">
                                <p style="font-size:18px;margin:0 0 0 15px;letter-spacing:2px">
                                基础信息<i class="header-icon el-icon-info" style="margin-left:5px"></i>
                                </p>
                            </template>
                            <div>是否公开：{{questionList.public}}</div>
                            <div>是否匿名：{{questionList.anonymous}}</div>
                            <div>答卷数：{{num}}</div>
                            <div>起始时间：{{questionList.start_time}}-{{questionList.end_time}}</div>
                        </el-collapse-item>
                        <div 
                        v-for="(question, index) in answerDataList"
                        v-bind:key="index"
                        >
                            <el-collapse-item 
                            v-if="question.qstype=='单选题'||question.qstype=='多选题'"
                            >
                                <template slot="title">
                                    <p style="font-size:18px;margin:0 0 0 15px;letter-spacing:2px">
                                    ({{question.qstype}}){{question.qcontent}}
                                    </p>
                                </template>
                                <div v-for="(select, index_5) in allTimes[index]" :key="'5-'+index_5">
                                    {{select.content}}（数量：{{select.time}}，比例：{{select.ratio}}）
                                    <el-button 
                                    type="text" 
                                    style="margin-left:5px;font-size:16px"
                                    @click="showAnswerers(question.all_answers,question.qstype,select.content)"
                                    >查看</el-button>
                                </div>
                                <div v-if="question.qstype=='单选题'">
                                    <div v-for="(answer, index_2) in answerDataList[index].all_answers" :key="'2-'+index_2">
                                        <!-- {{answer.answerer}}:{{answer.answerContent}} -->
                                    </div>
                                    <el-button @click="showChart(question,allTimes[index])">查看图表</el-button>
                                </div>
                                <div v-if="question.qstype=='多选题'">
                                    <div v-for="(answer, index_3) in answerDataList[index].all_answers" :key="'3-'+index_3">
                                        <!-- {{answer.answerer}}:{{answer.answerContent}} -->
                                    </div>
                                    <el-button @click="showChart(answerDataList[index],allTimes[index])">查看图表</el-button>
                                </div>
                            </el-collapse-item>
                            <el-collapse-item 
                            v-if="question.qstype=='文字题'"
                            >
                                <template slot="title">
                                    <p style="font-size:18px;margin:0 0 0 15px;letter-spacing:2px">
                                    ({{question.qstype}}){{question.qcontent}}
                                    </p>
                                </template>
                                <div v-for="(answer, index_4) in answerDataList[index].all_answers" :key="'4-'+index_4">
                                    <div v-if="answer.answerer">{{answer.answerer}}：</div>
                                    <div v-else>匿名：</div>
                                    {{answer.answerContent}}
                                </div>
                            </el-collapse-item>
                        </div>
                    </el-collapse>
                </el-main>
            </el-container>
        </el-container>
        <!-- 图表对话框 -->
        <!-- <el-form ref="chart_ref" :model="chart_model"> -->
        <el-dialog
        title="图表"
        :visible.sync="chart_visible"
        @close="chartClosed">
            <mEcharts
            :myChart="chart_id"
            :echartStyle="chart_model[5]"
            :titleText="chart_model[0]"
            :tooltipFormatter="chart_model[1]"
            :opinion="chart_model[2]"
            :seriesName="chart_model[3]"
            :opinionData="chart_model[4]"
            ></mEcharts>
        </el-dialog>
        <!-- </el-form> -->
    </div>
</template>

<script>
import leftMenu from '../components/myComponents/leftMenu'
import mEcharts from './myComponents/Echarts'
let answerList = []
let answerDataList, allTimes
let qid, num, questionList
export default {
    name: 'DetailedStatistics',
    components:{
        qid,
        leftMenu,
        mEcharts
    },
    data ()
    {
        return {
            questionList:{
                qname:'',
                public:'',
                anonymous:'',
                start_time:'',
                end_time:'',
                questions:[{
                    qstype:'', qcontent:''
                }]
            },
            answerList:[], //元素是每个人的答卷
            answerDataList:[{
                qsid: '',
                qstype: '',
                qcontent: '',
                all_answers: [{}]
            }], //元素是每道题的所有回答
            allTimes:[],
            qid,
            num,
            chart_visible:false,
            chart_id: '',
            chart_model:[
                '今日收到答卷',
                '数量',
                ['关于水果的调查问卷','对于XX的意见收集','问卷三','问卷四','问卷五'],
                '答卷统计',
                [
                    {value:11, name:'关于水果的调查问卷'},
                    {value:15, name:'对于XX的意见收集'},
                    {value:8, name:'问卷三'},
                    {value:12, name:'问卷四'},
                    {value:5, name:'问卷五'}
                ],
                {height: '380px'},
            ],
        }
    },
    methods: {
        toStatistics: function(){
            this.$router.push({path:'/statistics'})
        },

        choosePath(key){
            switch (key) {
                case "myReceived":
                    this.$router.push({path: '/myReceived'})
                    break;
                case "statistics":
                    this.$router.push({path: '/statistics'})
                    break;
                case "myCreated":
                    this.$router.push({path: '/myCreated'})
                    break;
                case "myModels":
                    this.$router.push({path: '/myModels'})
                    break;
                default:
                    break;
            }
        },
        
        //算元素出现次数
        countTimes(data){
            let obj = {};
            return data.reduce(function(time, name) {
                if (name in time) {
                    time[name]++;
                } else {
                    time[name] = 1;
                }
                return time;
            }, {});
        },

        //查找选项对应的答卷人
        showAnswerers: function(all_answers,qstype,content){
            let answerers = []
            console.log(content)
            if(qstype=='单选题'){
                let message = ''
                all_answers.forEach(item => {
                    console.log(item.answerContent)
                    if(item.answerContent==content){
                        if(item.answerer){
                            answerers.push(item.answerer)
                            message += item.answerer+"  "
                        }
                        else{
                            answerers.push("匿名")
                            message += item.answerer+"  "
                        }
                    }
                })
                this.$alert(message,"选择"+"“"+content+"”"+"的员工",{
                    confirmButtonText: '确定',
                    center: true,
                    callback: () => {}
                })
            }
            if(qstype=='多选题'){
                let message = ''
                all_answers.forEach(item => {
                    console.log(item.answerContent)
                    item.answerContent.forEach(element => {
                        if(element==content){
                            if(item.answerer){
                                answerers.push(item.answerer)
                                message += item.answerer+"  "
                            }
                            else{
                                answerers.push("匿名")
                                message += item.answerer+"  "
                            }
                        }
                    })
                })
                this.$alert(message,"选择"+"“"+content+"”"+"的员工",{
                    confirmButtonText: '确定',
                    center: true,
                    callback: () => {}
                })
            }
            else{
                return
            }
        },

        //查看图表按钮
        showChart: function(question,allTimes){
            let data = []
            console.log(question)
            console.log(allTimes)
            this.chart_id = question.qcontent
            data.push(question.qcontent)
            data.push("数量")
            let temp = []
            allTimes.forEach(item => {
                temp.push(item.content)
            })
            data.push(temp)
            data.push('答卷统计')
            let temp_2 = []
            allTimes.forEach(item => {
                temp_2.push({
                    value:item.time,
                    name:item.content
                })
            })
            data.push(temp_2)
            data.push({height: '380px'})
            this.chart_model = [].concat(data)
            this.chart_visible = true
            
        },

        chartClosed: function(){
            this.chart_visible = false
        }

    },
    mounted(){
        this.qid = this.$route.query.questionnaire_id
        this.$http.post('/getDetailedStatistics', {
            params:{
                questionnair_id: this.qid
            }
        }).then(res => {
            this.answerList = res.data.data
            this.num = this.answerList.length
            console.log("answerList:")
            console.log(this.answerList)
        })

        this.$http.post('/getQuestionnair', {
            params:{
                questionnair_id: this.qid
            }
        }).then(res => {
            res.data.data.questions.forEach(item => {
                switch (item.qstype) {
                    case '0':
                        item.qstype = '单选题'
                        break;
                    case '1':
                        item.qstype = '多选题'
                        break;
                    case '2':
                        item.qstype = '文字题'
                        break;
                    case '3':
                        item.qstype = '分节符'
                        break;
                    case '4':
                        item.qstype = '级联选择题'
                        break;
                    default:
                        break;
                }
            })
            this.questionList = res.data.data
            console.log("questionnair:")
            console.log(this.questionList)
        })

        let _this = this
        setTimeout(function() {
            _this.answerDataList.splice(0, 1)
            _this.questionList.questions.forEach(item => {
                if(item.qstype!='分节符'){
                    let temp = {
                        qsid: item.qsid,
                        qstype: item.qstype,
                        qcontent: item.qcontent,
                        all_answers: []
                    }
                    _this.answerDataList.push(temp)
                }
            
            })
        }, 1000);

        setTimeout(function() {
            _this.answerList.forEach(item => {
                item.answers.forEach(element => {
                    if(element.qstype=='2'){
                        let temp = {
                        answerer:item.answerer,
                        answerContent:element.input
                        }
                        _this.answerDataList.forEach(item_2 => {
                            if(item_2.qsid==element.qsid){
                                item_2.all_answers.push(temp)
                                // break
                            }
                        })
                    }
                    else{
                        let temp = {
                            answerer:item.answerer,
                            answerContent:element.selected_options
                        }
                        _this.answerDataList.forEach(item_2 => {
                            if(item_2.qsid==element.qsid){
                                item_2.all_answers.push(temp)
                                // break
                            }
                        })
                    }
                })
            })
            console.log("answerDataList:")
            console.log(_this.answerDataList)
        }, 2000)

        setTimeout(function() {
            let all = []
            _this.answerDataList.forEach(item => {
                if(item.qstype=='单选题'){
                    let temp = []
                    item.all_answers.forEach(element => {
                        temp.push(element.answerContent)
                    })
                    let times = _this.countTimes(temp)
                    let arr = []
                    for (let prop in times) {
                        arr.push({
                            content: prop,
                            time: times[prop]
                        })
                    }
                    let len = arr.length
                    arr.forEach(element_2 => {
                        element_2.ratio = element_2.time/len*100
                        element_2.ratio = element_2.ratio.toFixed(2)
                        element_2.ratio+='%'
                    })
                    all.push(arr)
                }
                if(item.qstype=='多选题'){
                    let temp = []
                    item.all_answers.forEach(element => {
                        element.answerContent.forEach(element_2 => {
                            temp.push(element_2)
                        })
                    })
                    let times = _this.countTimes(temp)
                    // all.push(times)
                    let arr = []
                    let len = 0
                    for (let prop in times) {
                        arr.push({
                            content: prop,
                            time: times[prop]
                        })
                        len +=times[prop]
                    }
                    arr.forEach(element_2 => {
                        element_2.ratio = element_2.time/len*100
                        element_2.ratio = element_2.ratio.toFixed(2)
                        element_2.ratio+='%'
                    })
                    all.push(arr)
                }
                if(item.qstype=='文字题'){
                    let temp = []
                    item.all_answers.forEach(element => {
                        temp.push(element.answerContent)
                    })
                    all.push(temp)
                }
            })
            _this.allTimes = all
            console.log("all:")
            console.log(all)
        }, 2500)

    }
}
</script>

<style>
#bkg {
    background: url("../pics/purple5.png");
    background-size: 100% 100%;
    height: 100%;
    background-attachment: fixed;
}

.el-icon-arrow-right:before {
    content: "\E6E0";
    font-size: 18px;
}

.el-collapse-item__header {
    background-color: #ffffff75;
}

.el-collapse-item__content {
    padding: 15px 0 25px 10px;
    font-size: 16px;
}
</style>